<template>
  <el-form :model="vo">
    <div :style="{width:formWidth}" class="el-table el-table--fit el-table--border">
      <div class="el-table__body-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
          <tbody>
            <template v-for="(row,key) in tbRows">
              <tr v-if="rowMaxFieldCount===3" :key="key">
                <template v-for="(field,fkey) in row.childs">
                  <td :key="fkey" class="tdlbl tdw13"><span v-if="field.isRequired===1" class="required">*</span>{{ field.propComment }}</td>
                  <td v-if="row.fieldCount===1" :key="'f'+fkey" colspan="5" class="tdcont tdw87"><form-item :field="field" :vo="vo" :can-edit="canEdit" /></td>
                  <td v-if="row.fieldCount===2" :key="'f'+fkey" :colspan="field.formTdColspan===16?3:1" :class="{'tdcont':true, 'tdw20':field.formTdColspan===8,'tdw44':field.formTdColspan===16}"><form-item :field="field" :vo="vo" :can-edit="canEdit" /></td>
                  <td v-if="row.fieldCount===3" :key="'f'+fkey" class="tdcont tdw20"><form-item :field="field" :vo="vo" :can-edit="canEdit" /></td>
                </template>
              </tr>
              <tr v-else-if="rowDisplay(row)||(row.childs[0].propName === 'resRoles' && vo.visitType === 1)" :key="key">
                <template v-for="(field,fkey) in row.childs">
                  <td :key="fkey" class="tdlbl tdw17"><span v-if="field.isRequired===1" class="required">*</span>{{ field.propComment }}</td>
                  <td v-if="row.fieldCount===1" :key="'f'+fkey" colspan="3" class="tdcont tdw83"><form-item :field="field" :vo="vo" :can-edit="canEdit" /></td>
                  <td v-if="row.fieldCount===2" :key="'f'+fkey" class="tdcont tdw33"><form-item :field="field" :vo="vo" :can-edit="canEdit" /></td>
                </template>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </el-form>
</template>

<script>
import FormItem from './FormItem'

export default {
    name: 'DynamicForm',
    components: {
        FormItem
    },
    props: {
        tableFieldInfo: { type: Array, default: function() { return [] } },
        vo: { type: Object, default: function() { return {} } },
        canEdit: { type: Number, default: 1 },
        formWidth: { type: String, default: '100%' },
        moduleInfo: { type: Object, default: function() { return {} } }
    },
    data: function() {
        return {
            formFields: [],
            tbRows: [],
            rowMaxFieldCount: 1
        }
    },
    watch: {
        vo: {
            handler(newValue, oldValue) {
                this.formFields = this.getFormFields()
                this.tbRows = []
                this.$nextTick(() => {
                    this.tbRows = this.getTbRows()
                    this.rowMaxFieldCount = this.getRowMaxFieldCount()
                })
            },
            immediate: true
        }
    },
    methods: {
        getFormFields() {
            const _this = this
            const formFields = []
            this.tableFieldInfo.forEach(function(field) {
                if (field.elementType === 'file') {
                    const nameField = _this.tableFieldInfo.filter(item => {
                        if (item.propName === field.defaultValue) return true
                    })
                    if (nameField.length > 0) {
                        field.nameField = nameField[0].propName
                        field.limitCount = field.valueMaxLength
                        field.valueMaxLength = nameField[0].valueMaxLength
                        field.downloadUrl = '/' + _this.moduleInfo.getByIdUrl.substring(0, _this.moduleInfo.getByIdUrl.lastIndexOf('/')) + '/download'
                        formFields.push(field)
                    }
                } else if (field.elementType !== 'hidden' && field.formShow !== 0) {
                    formFields.push(field)

                    if (field.propName === 'visitType' && field.searchabled !== true) {
                        let resFormatter = field.textFormatter
                        if (typeof field.textFormatter === 'string' && resFormatter.indexOf('{') !== -1 && resFormatter.indexOf('}') !== -1) {
                            resFormatter = JSON.parse(field.textFormatter)
                        } else if ((resFormatter === null || resFormatter === '') && _this.moduleInfo) {
                            const resType = _this.moduleInfo.moduleCode.substring(0, 1).toUpperCase() + _this.moduleInfo.moduleCode.substring(1)
                            resFormatter = { 'resType': resType, 'permissionCode': 'VISIT' }
                        }

                        const visitTypeField = {
                            'defaultValue': '',
                            'elementCanEdit': '{${canEdit}}',
                            'elementFormatter': '',
                            'elementReadonly': 0,
                            'elementType': 'checkbox',
                            'emptyMessage': '请选择访问授权',
                            'errorMessage': '',
                            'formTdColspan': 24,
                            'isRequired': 1,
                            'propComment': '访问授权',
                            'propName': 'resRoles',
                            'propType': 'String',
                            'textFormatter': 'textfield',
                            'resType': resFormatter.resType,
                            'permissionCode': resFormatter.permissionCode
                        }
                        formFields.push(visitTypeField)
                    }
                }
            })

            return formFields
        },
        getTbRows() {
            const rows = []
            let colspan = 0
            let curRow = {}

            this.formFields.forEach((field, index) => {
                if (field.formTdColspan === 24 || field.formTdColspan === 0) {
                    if (colspan > 0) {
                        rows.push(curRow)
                        curRow.childs[curRow.childs.length - 1].formTdColspan += (24 - colspan)
                    }

                    rows.push({ fieldCount: 1, childs: [field] })
                    colspan = 0
                } else if ((colspan + field.formTdColspan) < 24) {
                    if (colspan === 0) {
                        curRow = { fieldCount: 1, childs: [field] }
                    } else {
                        curRow.fieldCount++
                        curRow.childs.push(field)
                    }
                    colspan += field.formTdColspan
                } else if ((colspan + field.formTdColspan) === 24) {
                    curRow.fieldCount++
                    curRow.childs.push(field)
                    rows.push(curRow)

                    colspan = 0
                } else if ((colspan + field.formTdColspan) > 24) {
                    curRow.childs[curRow.childs.length - 1].formTdColspan += (24 - colspan)

                    rows.push({ fieldCount: 1, childs: [field] })
                    colspan = 0
                }

                if ((index + 1) === this.formFields.length && colspan > 0 && colspan < 24) {
                    curRow.childs[curRow.childs.length - 1].formTdColspan += (24 - colspan)
                    rows.push(curRow)
                }
            })
            return rows
        },
        getRowMaxFieldCount() {
            let maxCount = 1
            this.tbRows.forEach(function(row) {
                if (row.fieldCount > maxCount) maxCount = row.fieldCount
            })
            return maxCount
        },
        rowDisplay(row) {
            if (row.childs[0].propName === 'resRoles' && this.vo.visitType === 0) {
                return false
            } else {
                return true
            }
        }
    }
}
</script>

